<div class="help-dialog">
    <div mat-dialog-title>
        <span>Share Your Segfault Desktop</span>
    </div>
    <div class="help-content">
        <div class="flex-col share-area share-enable" *ngIf="!isActive">
            <div class="flex-row" title="Check to prevent others from interacting with your desktop">
                <mat-slide-toggle class="view-only-switch" 
                    [disabled]="enablingShare" 
                    [checked]="viewOnly"
                    (change)="toggleViewOnly()" />
                <b>View Only</b>
            </div>
            <button mat-raised-button *ngIf="!enablingShare" class="enable-btn"
                (click)="toggleSharing()">Create Link</button>
            <button mat-raised-button *ngIf="enablingShare"  class="enable-btn">Sharing...</button>
        </div>

        <div class="flex-col share-area" *ngIf="isActive">
            <div>
                <p class="flex-col">Share This Link</p>
            </div>
            <code class="share-link">{{sharelink}}</code>
            <button mat-raised-button *ngIf="!disablingShare" class="disable-btn" (click)="toggleSharing()">Stop Sharing</button>
            <button mat-raised-button *ngIf="disablingShare"  class="disable-btn" >Stopping...</button>
        </div>
    </div>
    <mat-dialog-actions align="end">
        <button class="alt-close-button" mat-button mat-dialog-close color="primary">Continue</button>
    </mat-dialog-actions>
</div>